import React, {useImperativeHandle, useRef} from 'react'
import './style.less'
import SearchForm from "./components/SearchForm";
import DataSource from "./components/DataSource";
import ButtonTableGroup from "./components/ButtonTableGroup";
import {ButtonType, DataSourceType, FormDataType, FormTypes, UseRefType} from "./DataType";

interface ListPageTypes {
    SearchConfig: FormTypes
    ButtonGroupConfig: Array<ButtonType> | []
    DataSourceConfig: DataSourceType
    cRef?: any
}

/**
 *
 * SearchConfig         搜索表单配置
 * ButtonGroupConfig    按钮组件列表
 * DataSourceConfig     数据表格配置列表
 * @constructor
 */
function ListPage(props: ListPageTypes) {
    const {SearchConfig, ButtonGroupConfig, DataSourceConfig, cRef} = props;
    const searchFormRef: UseRefType = useRef()              //搜索表单暴露对象
    const btnGroupRef: UseRefType = useRef()                //按钮列表暴露对象
    const dataSourceRef: UseRefType = useRef()              //表单暴露对象
    useImperativeHandle(cRef, () => ({
        selectRows: () => {                                                         //获取已选择数据(多选)
            return 1
        },
        selectRow: () => {                                                          //获取已选择数据(单选)
            return 1
        },
        tableSource: dataSourceRef.current,                                          //表格数据
        formValues: searchFormRef.current.form.getFieldsValue(),                     //筛选表单数据
        SearchForm: SearchFormFn,                                                    //筛选点击事件
        searchFormRef: searchFormRef,                                                //搜索表单暴露对象
        btnGroupRef: btnGroupRef,                                                    //按钮列表暴露对象
        tableSourceRef: dataSourceRef                                                //表单列表暴露对象
    }))

    /**
     * 搜索表单回调事件
     * @param data 表单值
     * @constructor
     */
    const SearchFormFn = (data: any) => {
        console.log(data)
    }


    return (
        <div className="list-page-view">
            <div className="search-form-view">
                {SearchConfig.formData.length > 0 &&
                <SearchForm {...SearchConfig} submitFn={SearchFormFn} cRef={searchFormRef}/>}
            </div>
            <div className="button-table-group-view">
                {ButtonGroupConfig?.length > 0 && <ButtonTableGroup btnGroup={ButtonGroupConfig} cRef={btnGroupRef}/>}
            </div>
            <div className="data-source-view">
                <DataSource {...DataSourceConfig} cRef={dataSourceRef}/>
            </div>
        </div>
    )
}

export default ListPage